<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Neon Admin Panel">
	<meta name="author" content="">
	
	<title>晓辰-监测系统</title>
	

	<link rel="stylesheet" th:href="@{/css/jquery-ui-1.10.3.custom.min.css}">
	<link rel="stylesheet" th:href="@{/css/entypo.css}">
	<link rel="stylesheet" th:href="@{/css/css.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap.css}">
	<link rel="stylesheet" th:href="@{/css/neon-core.css}">
	<link rel="stylesheet" th:href="@{/css/neon-theme.css}">
	<link rel="stylesheet" th:href="@{/css/neon-forms.css}">
	<link rel="stylesheet" th:href="@{/css/custom.css}">

	<script th:src="@{/js/jquery-1.11.0.min.js}"></script>

	<!--[if lt IE 9]><script src="assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->

	<!--引入ECharts-->
	<script src='/js/echarts.min.js'></script>
	<script src='/js/echarts-liquidfill.js'></script>

	<!--引用百度地图API-->
	<style type="text/css">
		html,body{margin:0;padding:0;}
		.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
		.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>

	<style type="text/css">
		body{
			margin: 0px auto;
			width:100%;
			min-width:1024px;
			max-width:1550px;
			height:100%;
			background-color:white;
		}
		.alert-danger, .alert-info{
			border-radius: 10px;
		}
		/*根据id设置css样式*/
		#han{
			margin-bottom: 5px;
		}
		/*异常状况*/
		.danger{
			font-size: 16px;
			line-height: 20px;
			font-weight: bold;
		}
		.dangerButton{
			float: left;
			margin-left: 13%;
			margin-top: 6%;
			margin-right: 5%;
		}
		.dangerButton p{
			font-size: 13px;
			font-weight: bold;
			margin-top: 20%;
		}
		.dangerBlock{
			height: 300px;
			background-color: #e9e1e1;
			margin-bottom: 5%;
			border-radius: 15px;
		}
		/*地表水用途*/
		.infoBlock{
			height: 300px;
			background-color: #eaf1f7;
			border-radius: 15px;
		}
		.infoBlock .info{
			font-size: 16px;
			line-height: 20px;
			font-weight: bold;
		}
		/*实时监测*/
		.RealTimeMonitoring .monitor{
			font-size: 20px;
			line-height: 25px;
			font-weight: bold;
		}

		/*图表√×样式*/
		.glyphicon-ok{
			color: green;
		}
		.glyphicon-remove{
			color: red;
		}
		/*表格居中+字体*/
		.table-tr{
			font-size: 20px;
			background-color: #e2dbdb;
			align-items: center;
		}
		.table th, .table td {
			text-align: center;
			vertical-align: middle!important;
		}
		.table td{
			font-size: 15px;
		}
		.page-container{
			width: 100%;
			position: relative;
		}
		.main-content{
			position: absolute;
		}
	</style>
	
	
</head>
<body class="page-body  page-fade gray" data-url="http://neon.dev">

	<div class="page-container"><!-- add class "sidebar-collapsed" to close sidebar by default, "chat-visible" to make chat appear always -->

		<!--调用可复用代码：侧边栏-->
		<div th:insert="~{commons/common::sidebar(active='watchSystem.html')}"></div>
		<div class="main-content">
			<!--调用可复用代码：头部栏-->
			<div th:insert="~{commons/common::topbar}"></div>
			<hr>

			<script type="text/javascript">

			</script>


			<div class="row">

				<div class="col-md-4 col-sm-6">

					<!--异常图表-->
						<div  class="tile-stats tile-white">
							<div class="icon"></div>
							<h3><b>异常图表</b></h3><br>
							<form class="form-horizontal">

								<div class="alert alert-danger" role="alert" style="height: 50px;padding: 10px; display: flex; justify-content: center;">
									<p class="p_han" style="display:inline-block; margin-right:auto; padding-left: 20px; font-size: 15px;">站点异常</p>
									<p class="p_han2" style="display:inline-block; margin-left:auto; padding-right: 40px;font-size: 15px;" id="site_count2"></p>
								</div>

								<div class="alert alert-danger" role="alert" style="height: 50px;padding: 10px; display: flex; justify-content: center;">
									<p class="p_han" style="display:inline-block; margin-right:auto; padding-left: 20px; font-size: 15px;">浊度异常</p>
									<p class="p_han2" style="display:inline-block; margin-left:auto; padding-right: 40px;font-size: 15px;" id="turbidity_count2"></p>
								</div>
								<div class="alert alert-danger" role="alert" style="height: 50px;padding: 10px; display: flex; justify-content: center;">
									<p class="p_han" style="display:inline-block; margin-right:auto; padding-left: 20px; font-size: 15px;">PH异常</p>
									<p class="p_han2" style="display:inline-block; margin-left:auto; padding-right: 40px;font-size: 15px;" id="ph_count2"></p>
								</div>
								<div class="alert alert-danger" role="alert" style="height: 50px;padding: 10px; display: flex; justify-content: center;">
									<p class="p_han" style="display:inline-block; margin-right:auto; padding-left: 20px; font-size: 15px;">溶解氧异常</p>
									<p class="p_han2" style="display:inline-block; margin-left:auto; padding-right: 40px;font-size: 15px;" id="doxygen_count2"></p>
								</div>
							</form>
						</div>

					<!--地表水用途-->
					<div class="infoBlock">
						<div class="alert alert-info" role="alert">
							<p class="info">地表水用途</p>
						</div>

						<div id="distribution" style="width: 90%;height:85%;margin-left: 8%"></div>
						<script type="text/javascript">

							$.getJSON("http://localhost:8086/sewage/getPhosphorusData", function (data) {
								// var map = data.data;
								var mapList = data.data;
								// 遍历List<Map<String,Object>>
								var normalList = 0;
								var anormalList = 0;

								$.each(mapList, function(index, map) {
									// 已知前面是省会，占了四个字符从索引位置4开始截取
									var Phosphorus = map.totalPhosphorus.toFixed(2);
									if ( Phosphorus < 0.1){
										normalList = normalList+ 1;
									}else {
										anormalList = anormalList +1;
									}
								});
								// 在这里调用函数来更新图表数据
								updateChart1(normalList,anormalList);
							});

							function updateChart1(normalList,anormalList) {
								// 基于准备好的dom，初始化echarts实例
								var myChart = echarts.init(document.getElementById('distribution'));

								// 指定图表的配置项和数据
								var option = {
									xAxis: {
										type: 'category',
										data: ['饮用水源地', '一般景观水域等']
									},
									yAxis: {
										type: 'value'
									},
									/*距离容器最上方5%*/
									grid: {
										top: '10%'
									},
									series: [
										{
											data: [normalList,anormalList],
											type: 'bar',
											itemStyle: {
												normal: {
													label: {
														show: true,       //开启显示
														position: 'top',   //在上方显示
														textStyle: {       //数值样式
															color: 'black',
															fontSize: 10
														}
													}
												}
											}
										},
									],
									color: [
										"#aecae2"
									]
								};

								// 使用刚指定的配置项和数据显示图表。
								myChart.setOption(option);

							}
						</script>
					</div>
				</div>

				<div class="col-md-8 col-sm-6">
<!--					中间环形图2张-->
					<div class="col-md-6" style="height:350px">

						<!--企业水质等级-->
						<div class="tile-stats tile-white stat-tile" style="height: 95%">
							<div class="alert alert-info" role="alert">
								<a class="info"> 不同标准排放数量</a>
							</div>
							<div class="radis-left" id="annular-container" style="height: 90%"></div>
						</div>



					</div>
<!--					右边环形图-->
					<div class="col-md-6" style="height:350px">
						<!--水质数量-->
						<div class="tile-stats tile-white stat-tile" style="height: 95%">
							<div class="alert alert-info" role="alert">
								<a class="info">污水排放量级</a>
							</div>
							<div id="radis-container" style="height: 80%"></div>
						</div>
					</div>

<!--中右表-->
					<div class="col-md-12">
								<div class="col-md-11" style="height: 350px;">
									<div style="height: 100%;">
										<div class="tile-stats tile-white stat-tile" style="height: 320px;">
											<div class="alert alert-info" role="alert">
												<a class="info">企业最近排污信息变化</a>
											</div>
											<div id="broken-container" style="height: 80%;width: 99%;"></div>
										</div>
									</div>
								</div>
					</div>
<!--					<div > <b  id="company"></b></div>-->
					<div > <b  id="distinctCompany"></b></div>





				</div>

			<br>
			</div>
			<br>

			<!--		污水建议-->
			<div class="row">
				<div class="col-md-12">
					<div class="RealTimeMonitoring">
					<div class="alert alert-info" role="alert" id="han">
						<p class="monitor">流域、省市排污数据</p>
					</div>
					<table class="table table-bordered ">
						<tr class="table-tr">
							<th>排污编码</th>
							<th>流域河流</th>
							<th>省市</th>
							<th>溶解氧(毫克/升)</th>
							<th>总氮(毫克/升)</th>
							<th>氨氮(毫克/升)</th>
							<th>PH值</th>
							<th>水质类别</th>
						</tr>
						<tbody id="table-body">
						</tbody>

					</table>
					</div>
				</div>

				<script type="text/javascript">



					$.getJSON("http://localhost:8086/sewage/getAllWaterInfo", function (data) {
						var waterQualityData = data.data;
						var randomData = waterQualityData.sort(() => Math.random() - 0.5).slice(0, 5);
						console.log(waterQualityData);
						// 清空表格内容
						$('#table-body').empty();

						// 遍历数据并逐行渲染到表格中
						$.each(randomData, function(index, item) {
							// 获取该行每个字段的值
							// var statusHtml = '<td><span class="glyphicon ' + (item['siteCondition'] === '正常' ? 'glyphicon-ok' : 'glyphicon-remove') + ' aria-hidden="true"></span></td>';
							// var pointHtml = '<td>' + item['sectionPoint'] + '</td>';
							// var idHtml = '<td>' + item['Mid'] + '</td>';
							// var temperatureHtml = '<td>' + item['waterTemperature'] + '</td>';
							// var conductivityHtml = '<td>' + item['Conductivity'] + '</td>';
							// var timeHtml = '<td>' + item['monitoringTime'] + '</td>';
										var idHtml = '<td>' + item['Mid'] + '</td>';
										var temperatureHtml = '<td>' + item['Water_Temperature'] + '</td>';
										var TurbidityHtml = '<td>' + item['Turbidity'] + '</td>';
										//4：Chlorophyll_Alpha
										var Watershed_RiverHtml = '<td>' + item['Watershed_River'] + '</td>';
										var Province_CityHtml = '<td>' + item['Province_City'] + '</td>';
										var Dissolved_OxygenHtml = '<td>' + item['Dissolved_Oxygen'] + '</td>';
										var timeHtml = '<td>' + item['Monitoring_Time'] + '</td>';
										var Total_PhosphorusHtml = '<td>' + item['Total_Phosphorus'] + '</td>';
										//10：Algal_Density
										var conductivityHtml = '<td>' + item['Conductivity'] + '</td>';
										var Total_NitrogenHtml = '<td>' + item['Total_Nitrogen'] + '</td>';
										var PHHtml = '<td>' + item['PH'] + '</td>';
										var pointHtml = '<td>' + item['Section_Point'] + '</td>';
										var Ammonia_NitrogenHtml = '<td>' + item['Ammonia_Nitrogen'] + '</td>';
										var Water_Quality_TypeHtml = '<td>' + item['Water_Quality_Type'] + '</td>';
										var Permanganate_IndexHtml = '<td>' + item['Permanganate_Index'] + '</td>';
										var statusHtml = '<td><span class="glyphicon ' + (item['Site_Condition'] === '正常' ? 'glyphicon-ok' : 'glyphicon-remove') + ' aria-hidden="true"></span></td>';
										//放入row中
										// var row = $('<tr>').append(statusHtml, pointHtml, idHtml, temperatureHtml, conductivityHtml, timeHtml);
										//放入row中
										var row = $('<tr>').append(idHtml,Watershed_RiverHtml,Province_CityHtml, Dissolved_OxygenHtml, Total_PhosphorusHtml,
												Total_NitrogenHtml, PHHtml, Water_Quality_TypeHtml);
										$('#table-body').append(row);

							// 创建一行<tr>元素，并将字段的HTML添加到其中
							// var row = $('<tr>').append(statusHtml,pointHtml, idHtml, temperatureHtml, conductivityHtml, timeHtml);
							// 将该行<tr>元素加入表格<tbody>中
							$('#table-body').append(row);

						});
					});



				</script>
			</div>

			<!-- Footer -->
			<footer class="main">
				晓辰学技术
			</footer>
		</div>

		<div th:insert="~{commons/common::rightbar}"></div>
	</div>



	<link rel="stylesheet" th:href="@{/css/jquery-jvectormap-1.2.2.css}">
	<link rel="stylesheet" th:href="@{/css/rickshaw.min.css}">

	<!-- Bottom Scripts -->
	<script th:src="@{/js/main-gsap.js}"></script>
	<script th:src="@{/js/jquery-ui-1.10.3.minimal.min.js}"></script>
	<script th:src="@{/js/bootstrap.js}"></script>
	<script th:src="@{/js/joinable.js}"></script>
	<script th:src="@{/js/resizeable.js}"></script>
	<script th:src="@{/js/neon-api.js}"></script>
	<script th:src="@{/js/jquery-jvectormap-1.2.2.min.js}"></script>
	<script th:src="@{/js/jquery-jvectormap-europe-merc-en.js}"></script>
	<script th:src="@{/js/jquery.sparkline.min.js}"></script>
	<script th:src="@{/js/d3.v3.js}"></script>
	<script th:src="@{/js/rickshaw.min.js}"></script>
	<script th:src="@{/js/raphael-min.js}"></script>
	<script th:src="@{/js/morris.min.js}"></script>
	<script th:src="@{/js/toastr.js}"></script>
	<script th:src="@{/js/fullcalendar.min.js}"></script>
	<script th:src="@{/js/neon-chat.js}"></script>
	<script th:src="@{/js/neon-custom.js}"></script>
	<script th:src="@{/js/neon-demo.js}"></script>

</body>
<!--地图-->
<script type="text/javascript">
	//创建和初始化地图函数：
	function initMap(){
		createMap();//创建地图
		setMapEvent();//设置地图事件
		addMapControl();//向地图添加控件
		addMarker();//向地图中添加marker
	}

	//创建地图函数：
	function createMap(){
		var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
		var point = new BMap.Point(112.589618,26.872244);//定义一个中心点坐标
		map.centerAndZoom(point,13);//设定地图的中心点和坐标并将地图显示在地图容器中
		window.map = map;//将map变量存储在全局
	}

	//地图事件设置函数：
	function setMapEvent(){
		map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
		map.enableScrollWheelZoom();//启用地图滚轮放大缩小
		map.disableDoubleClickZoom();//禁用鼠标双击放大
		map.enableKeyboard();//启用键盘上下左右键移动地图
	}

	//地图控件添加函数：
	function addMapControl(){
		//向地图中添加缩放控件
		var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_ZOOM});
		map.addControl(ctrl_nav);
		//向地图中添加缩略图控件
		var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
		map.addControl(ctrl_ove);
		//向地图中添加比例尺控件
		var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
		map.addControl(ctrl_sca);
	}

	//标注点数组
	var markerArr = [{title:"企业群1001",content:"企业群1001",point:"112.59666|26.905754",isOpen:1,icon:{w:23,h:25,l:23,t:21,x:9,lb:12}}
		,{title:"企业群1001",content:"企业群1001",point:"112.53666|26.925754",isOpen:1,icon:{w:23,h:25,l:23,t:21,x:9,lb:12}}
		,{title:"企业群1001",content:"企业群1001",point:"112.52666|26.955754",isOpen:1,icon:{w:23,h:25,l:23,t:21,x:9,lb:12}}
		,{title:"企业群1001",content:"企业群1001",point:"112.55666|26.965754",isOpen:1,icon:{w:23,h:25,l:23,t:21,x:9,lb:12}}
		,{title:"企业群1001",content:"企业群1001",point:"112.51666|26.995754",isOpen:1,icon:{w:23,h:25,l:23,t:21,x:9,lb:12}}
		,{title:"企业群1001",content:"企业群1001",point:"112.52666|26.935754",isOpen:1,icon:{w:23,h:25,l:23,t:21,x:9,lb:12}}
		,{title:"企业群1001",content:"企业群1001",point:"112.54666|26.955754",isOpen:1,icon:{w:23,h:25,l:23,t:21,x:9,lb:12}}
		,{title:"企业群1001",content:"企业群1001",point:"112.58666|26.965754",isOpen:1,icon:{w:23,h:25,l:23,t:21,x:9,lb:12}}
		,{title:"企业群1001",content:"企业群1001",point:"112.55666|26.955754",isOpen:1,icon:{w:23,h:25,l:23,t:21,x:9,lb:12}}
		,{title:"企业群1001",content:"企业群1001",point:"112.54666|26.945754",isOpen:1,icon:{w:23,h:25,l:23,t:21,x:9,lb:12}}
		,{title:"企业群1001",content:"企业群1001",point:"112.53666|26.935754",isOpen:1,icon:{w:23,h:25,l:23,t:21,x:9,lb:12}}
		,{title:"企业群1001",content:"企业群1001",point:"112.52666|26.925754",isOpen:1,icon:{w:23,h:25,l:23,t:21,x:9,lb:12}}
	];
	//创建marker
	function addMarker(){
		for(var i=0;i<markerArr.length;i++){
			var json = markerArr[i];
			var p0 = json.point.split("|")[0];
			var p1 = json.point.split("|")[1];
			var point = new BMap.Point(p0,p1);
			var iconImg = createIcon(json.icon);
			var marker = new BMap.Marker(point,{icon:iconImg});
			var iw = createInfoWindow(i);
			var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
			marker.setLabel(label);
			map.addOverlay(marker);
			label.setStyle({
				borderColor:"#808080",
				color:"#333",
				cursor:"pointer"
			});

			(function(){
				var index = i;
				var _iw = createInfoWindow(i);
				var _marker = marker;
				_marker.addEventListener("click",function(){
					this.openInfoWindow(_iw);
				});
				_iw.addEventListener("open",function(){
					_marker.getLabel().hide();
				})
				_iw.addEventListener("close",function(){
					_marker.getLabel().show();
				})
				label.addEventListener("click",function(){
					_marker.openInfoWindow(_iw);
				})
				if(!!json.isOpen){
					label.hide();
					_marker.openInfoWindow(_iw);
				}
			})()
		}
	}
	//创建InfoWindow
	function createInfoWindow(i){
		var json = markerArr[i];
		var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
		return iw;
	}
	//创建一个Icon
	//th:src="@{/image/img/logo.png}"
	function createIcon(json){
		var icon = new BMap.Icon("http://map.baidu.com/image/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
		return icon;
	}

	initMap();//创建和初始化地图
</script>

<!--左边-->
 	<!--异常信息-->
	<!--	图表数据-->
<script type="text/javascript">
	// 获取后端数据
	$.getJSON("http://localhost:8086/sewage/getNormalBy", function (data) {
		var map = data.data;
		var total_count4 = map.total_count
		var condition_count1 = map.condition_count1
		var condition_count2 = map.condition_count2
		var condition_count3 = map.condition_count3
		var condition_count4 = map.condition_count4

		$("#total_count4").html(total_count4)
		//正常数据
		$("#site_count").html(condition_count1)
		$("#turbidity_count").html(condition_count2)
		$("#ph_count").html(condition_count3)
		$("#doxygen_count").html(condition_count4)
		//异常数据
		$("#site_count2").html(total_count4-condition_count1)
		$("#turbidity_count2").html(total_count4-condition_count2)
		$("#ph_count2").html(total_count4-condition_count3)
		$("#doxygen_count2").html(total_count4-condition_count4)
		console.log("Data received: " + map);
		// 在这里调用函数来更新图表数据

	});

</script>
<!--中上边框-->
	<!--环形图-->
<script type="text/javascript">

	//排污浓度
	var data1 = 0;
	var data2 = 0;
	var data3 = 0;
	var data4 = 0;
	var data5 = 0;




	$.getJSON("http://localhost:8086/sewage/getEnterpriseData", function(data) {
		$.each(data.data, function(index, item) {
			var pollutant_concentration = item.pollutant_concentration;

			if (pollutant_concentration <= 30) {
				data1 = data1 + 1;
			} else if (pollutant_concentration <= 100) {
				data2 = data2 + 1;
			}else if (pollutant_concentration <= 200) {
				data3 = data3 + 1;
			}else if (pollutant_concentration <= 300) {
				data4 = data4 + 1;
			}else {
				data5 = data5 + 1;
			}
		})


		var dom = document.getElementById("annular-container");
		var myChart = echarts.init(dom);
		// var app = {};
		var option;

		option = {
			tooltip: {
				trigger: 'item'
			},
			legend: {
				top: '7%',
				left: 'center'
			},
			title: {
				text: '排污标准'
			},
			series: [
				{
					name: '标准数量',
					type: 'pie',
					radius: ['30%', '60%'],
					avoidLabelOverlap: false,
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '40',
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: false
					},
					data: [
						{value: data1, name: 'I类'},
						{value: data2, name: 'II类'},
						{value: data3, name: 'III类'},
						{value: data4, name: 'IV类'},
						{value: data5, name: 'V类'}
						// { value: 100, name: 'I类' },
						// { value: 11, name: 'II类' },
						// { value: 22, name: 'III类' },
						// { value: 344, name: 'IV类' },
						// { value: 55, name: 'V类' }
					]
				}
			]
		};
		// if (option && typeof option === 'object') {
			myChart.setOption(option);
		// }

	});



</script>
	<!--圆形图-->
<script type="text/javascript">
	//排污量
	var tdata1 = 0;
	var tdata2 = 0;
	var tdata3 = 0;
	var tdata4 = 0;
	var tdata5 = 0;


	$.getJSON("http://localhost:8086/sewage/getEnterpriseData", function(data) {



		$.each(data.data, function(index, item) {
			// var pollutant_concentration = item.pollutant_concentration;
			var pollutant_discharge = item.pollutant_discharge;

			if (pollutant_discharge <= 1000) {
				tdata1 = tdata1 + 1;
			} else if (pollutant_discharge <= 2000) {
				tdata2 = tdata2 + 1;
			}else if (pollutant_discharge <= 3000) {
				tdata3 = tdata3 + 1;
			}else if (pollutant_discharge <= 4000) {
				tdata4 = tdata4 + 1;
			}else {
				tdata5 = tdata5 + 1;
			}
		})
	var dom = document.getElementById("radis-container");
	var myChart1 = echarts.init(dom);
	// var app = {};
	var option1;
	option1 = {
		title: {
			text: '不同排污量',
			subtext: '数量情况',
			left: 'center'
		},
		tooltip: {
			trigger: 'item'
		},
		legend: {
			orient: 'vertical',
			left: 'left'
		},
		series: [
			{
				name: '数量',
				type: 'pie',
				radius: '33%',
				data: [
					{value: tdata1, name: '<1000'},
					{value: tdata2, name: '1000~2000'},
					{value: tdata3, name: '2000~3000'},
					{value: tdata4, name: '3000~4000'},
					{value: tdata5, name: '>4000'}
					// { value: 1048, name: 'I类' },
					// { value: 735, name: 'II类' },
					// { value: 580, name: 'III类' },
					// { value: 484, name: 'IV类' },
					// { value: 300, name: 'V类' }
				],
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}
		]
	};

	// if (option && typeof option === 'object') {
		myChart1.setOption(option1);
	// }

	});
</script>
	<!--不规则环形-->
<script type="text/javascript">
	var dom = document.getElementById("radis2-container");
	var myChart = echarts.init(dom);
	var app = {};
	var option;
	option = {
		title: {
			text: '占比',
			subtext: '超标水质',
			left: 'left'
		},
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b} : {c} ({d}%)'
		},
		legend: {
			left: 'center',
			top: 'bottom',
			data: [
				'I类' ,
				'II类' ,
				'III类' ,
				'IV类' ,
				'V类'
			]
		},
		toolbox: {
			show: true,
			feature: {
				mark: { show: true },
				dataView: { show: true, readOnly: false },
				restore: { show: true },
				saveAsImage: { show: true }
			}
		},
		series: [
			{
				name: '全年超标占比率',
				type: 'pie',
				radius: [20, 100],
				center: ['50%', '50%'],
				roseType: 'area',
				itemStyle: {
					borderRadius: 5
				},
				data: [
					{ value: 330, name: 'I类' },
					{ value: 300, name: 'II类' },
					{ value: 280, name: 'III类' },
					{ value: 250, name: 'IV类' },
					{ value: 200, name: 'V类' }
				]
			}
		]
	};

	if (option && typeof option === 'object') {
		myChart.setOption(option);
	}
</script>


<!--右下图-->
<!--矩形图  -->
<script type="text/javascript">
	var dom = document.getElementById("rectangle-container");
	var myChart = echarts.init(dom);
	var app = {};
	var option;
	// prettier-ignore
	let dataAxis = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
	// prettier-ignore
	let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149];
	let yMax = 500;
	let dataShadow = [];
	for (let i = 0; i < data.length; i++) {
		dataShadow.push(yMax);
	}
	option = {
		title: {
			subtext: '可以进行缩放'
		},
		xAxis: {
			data: dataAxis,
			axisLabel: {
				inside: true,
				color: '#fff'
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: false
			},
			z: 10
		},
		yAxis: {
			axisLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				color: '#999'
			}
		},
		dataZoom: [
			{
				type: 'inside'
			}
		],
		series: [
			{
				type: 'bar',
				showBackground: true,
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: '#83bff6' },
						{ offset: 0.5, color: '#188df0' },
						{ offset: 1, color: '#188df0' }
					])
				},
				emphasis: {
					itemStyle: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{ offset: 0, color: '#2378f7' },
							{ offset: 0.7, color: '#2378f7' },
							{ offset: 1, color: '#83bff6' }
						])
					}
				},
				data: data
			}
		]
	};
	// Enable data zoom when user click bar.
	const zoomSize = 6;
	myChart.on('click', function (params) {
		console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
		myChart.dispatchAction({
			type: 'dataZoom',
			startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
			endValue:
					dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
		});
	});

	if (option && typeof option === 'object') {
		myChart.setOption(option);
	}
</script>
<!--折线图-->
<script type="text/javascript">

	var  company = [];
	var seriesData = [];
	var pollutantData = [];
	$.getJSON("http://localhost:8086/sewage/getEnterpriseData", function (data) {
		$.each(data.data, function(index, item) {
			// var pollutant_concentration = item.pollutant_concentration;
			var company_code = item.company_code;
			company.push(company_code);

			var pollutant_discharge = item.pollutant_discharge;
			if (!pollutantData[company_code]) {
				// 如果该企业不存在，创建一个新空数组来保存污染物数据
				pollutantData[company_code] = [];
			}
			if (pollutantData[company_code].length < 7) {
				// 只添加前7条污染物数据
				pollutantData[company_code].push(pollutant_discharge);
			}
		});
		var distinctCompany = Array.from(new Set(company));
		//使用company表，进行联表查询 // 获取公司数据
		$.getJSON("http://localhost:8086/sewage/getCompanyData", function (data) {
			$.each(data.data, function(index, item) {
				var company_code = item.company_code;
				var company_name = item.company_name;

				// 替换company_code为company_name
				for (var i = 0; i < company.length; i++) {
					if (company[i] === company_code) {
						company[i] = company_name;
					}
				}
			});


		//	更新对应的distinctCompany信息

		var distinctCompany1 = Array.from(new Set(company));

		// 循环遍历每个企业编码，构建与之对应的系列数据
		for (var i = 0; i < distinctCompany.length; i++) {
			var company_code = distinctCompany[i];
			var company_code1 = distinctCompany1[i];
			var series = {
				name: company_code1,
				type: 'line',
				stack: 'Total',
				areaStyle: {},
				emphasis: {
					focus: 'series'
				},
				data: pollutantData[company_code] || [] // 默认为空数组，以避免数据缺失时出错
			};
			seriesData.push(series);
		}

	// 	$("#distinctCompany").html(distinctCompany)
	// 	$("#company").html(company)
	//

	var dom = document.getElementById("broken-container");
	var myChart = echarts.init(dom);
	// var app = {};
	var option;
	option = {
		title: {
			// text: 'Stacked Area Chart'
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		legend: {
			// data: ['企业一', '企业二', '企业三', '企业四']
			data: distinctCompany1
		},
		toolbox: {
			feature: {
				saveAsImage: {}
			}
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: [
			{
				type: 'category',
				boundaryGap: false,
				data: ['day1', 'day2', 'day3', 'day4', 'day5', 'day6', 'day7']
			}
		],
		yAxis: [
			{
				type: 'value'
			}
		],
		series: seriesData
		// series:
		// 		[
		// 	{
		// 		name: '企业一',
		// 		type: 'line',
		// 		stack: 'Total',
		// 		areaStyle: {},
		// 		emphasis: {
		// 			focus: 'series'
		// 		},
		// 		data: [120, 132, 101, 134, 90, 230, 210]
		// 	},
		// 	{
		// 		name: '企业二',
		// 		type: 'line',
		// 		stack: 'Total',
		// 		areaStyle: {},
		// 		emphasis: {
		// 			focus: 'series'
		// 		},
		// 		data: [150, 232, 201, 154, 190, 330, 410]
		// 	},
		// 	{
		// 		name: '企业三',
		// 		type: 'line',
		// 		stack: 'Total',
		// 		areaStyle: {},
		// 		emphasis: {
		// 			focus: 'series'
		// 		},
		// 		data: [320, 332, 301, 334, 390, 330, 320]
		// 	},
		// 	{
		// 		name: '企业四',
		// 		type: 'line',
		// 		stack: 'Total',
		// 		label: {
		// 			show: true,
		// 			position: 'top'
		// 		},
		// 		areaStyle: {},
		// 		emphasis: {
		// 			focus: 'series'
		// 		},
		// 		data: [820, 932, 901, 934, 1290, 1330, 1320]
		// 	}
		// ]
	};
	// if (option && typeof option === 'object') {
	// 	option.legend.data = distinctCompany;
		myChart.setOption(option);
	// }

	});
	});
</script>

<!--<script type="text/javascript">-->

<!--	$.getJSON("http://localhost:8086/sewage/getPhosphorusData", function (data) {-->
<!--		// var map = data.data;-->
<!--		var mapList = data.data;-->
<!--		// 遍历List<Map<String,Object>>-->
<!--		var normalList = 0;-->
<!--		var anormalList = 0;-->

<!--		$.each(mapList, function(index, map) {-->
<!--			// 已知前面是省会，占了四个字符从索引位置4开始截取-->
<!--			var Phosphorus = map.totalPhosphorus.toFixed(2);-->
<!--			if ( Phosphorus < 0.1){-->
<!--				normalList = normalList+ 1;-->
<!--			}else {-->
<!--				anormalList = anormalList +1;-->
<!--			}-->
<!--		});-->
<!--		// 在这里调用函数来更新图表数据-->
<!--		updateChart1(normalList,anormalList);-->
<!--	});-->

<!--	function updateChart1(normalList,anormalList) {-->
<!--		// 基于准备好的dom，初始化echarts实例-->
<!--		var myChart = echarts.init(document.getElementById('distribution'));-->

<!--		// 指定图表的配置项和数据-->
<!--		var option = {-->
<!--			xAxis: {-->
<!--				type: 'category',-->
<!--				data: ['饮用水源地', '一般景观水域等']-->
<!--			},-->
<!--			yAxis: {-->
<!--				type: 'value'-->
<!--			},-->
<!--			/*距离容器最上方5%*/-->
<!--			grid: {-->
<!--				top: '10%'-->
<!--			},-->
<!--			series: [-->
<!--				{-->
<!--					data: [normalList,anormalList],-->
<!--					type: 'bar',-->
<!--					itemStyle: {-->
<!--						normal: {-->
<!--							label: {-->
<!--								show: true,       //开启显示-->
<!--								position: 'top',   //在上方显示-->
<!--								textStyle: {       //数值样式-->
<!--									color: 'black',-->
<!--									fontSize: 10-->
<!--								}-->
<!--							}-->
<!--						}-->
<!--					}-->
<!--				},-->
<!--			],-->
<!--			color: [-->
<!--				"#aecae2"-->
<!--			]-->
<!--		};-->

<!--		// 使用刚指定的配置项和数据显示图表。-->
<!--		myChart.setOption(option);-->

<!--	}-->
<!--</script>-->

</html>